<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海贼王！我当定了！！</title>
    <link rel="short icon" href="img/caomao.jpg">
    <link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
    <div class="box">

        <!--header 结构 开始-->
        <header class="text-center" style="background-color: lightgray;padding: 30px 0">
            <div class="container">
                <h1>草帽海贼团</h1>
                <p>草帽海贼团成员</p>
            </div>
        </header>
        <!--header 结构 结束-->

        <!--main 结构 开始-->
        <main>
            <div class="container clearfix">
                <h3>添加</h3>
                <input id="n" type="text" class="form-control" placeholder="请您输入姓名">
                <select id="s" class="form-control">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <input id="a" type="number" class="form-control" placeholder="请您输入年龄">
                <button  id="btn" type="button" class="btn btn-primary">添加</button>
            </div>
        </main>
        <!--main 结构 结束-->

        <!--footer 结构 开始-->
        <footer>
            <div class="container">
                <h3>列表</h3>
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">姓名</th>
                        <th scope="col">性别</th>
                        <th scope="col">年龄</th>
                    </tr>
                    </thead>
                    <tbody id="tb">

                    </tbody>
                </table>
            </div>
        </footer>
        <!--footer 结构 结束-->
    </div>

    <!--链接js-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>